<template>
	<view class="pages" :style="{ 'min-height': h + 'px', 'padding-top': mt + 'px' }">
		<c-nav-bar :title="titleHeader"></c-nav-bar>
		<scroll-view @scrolltolower="lowerBottom" scroll-y="true" lower-threshold='80'>
			<view class="content">
				<view class="card" v-for="(item, index) in dataList" :key='index' @click="handleDetail(item)">
					<view class="object">
						<view class="left">
							<text class="title">投诉对象</text>
							<text style="font-weight: 700;">{{ item.complainantObject }}</text>
						</view>
						<view :class="configStyle[item.state]" class="data"> {{ config[item.state] }}></view>
					</view>
					<view class="detail">
						<text class="title">详细意见</text>
						<text>{{ item.content }}</text>
					</view>
					<view class="submitTime">
						<view class="left">
							<text class="title">提交时间</text>
							<text class="data">{{ item.createDate }}</text>
						</view>
					</view>
					<view class="qpj" v-if="item.state == 3" @tap.stop="pj(item)">去评价</view>
				</view>
				<view class="more_text" v-if="showMoreData">没有更多了</view>
				<view style="padding-bottom: 10vh;" v-if="nodata">
					<nodata></nodata>
				</view>
			</view>

		</scroll-view>
		<view class="bottom">
			<view class="btn" @click="goToComplain()">
				我要反馈
			</view>
		</view>
	</view>
</template>

<script>
import nodata from '@/compoments/NoData/index.vue'
export default {
	data() {
		return {
			h: uni.getSystemInfoSync().windowHeight,
			mt: uni.getSystemInfoSync().statusBarHeight + 44,
			titleHeader: '意见反馈',
			showMoreData: false,
			nodata: true,
			totalPage: null,
			pageNo: null,
			pageSize: null,
			userId: JSON.parse(wx.getStorageSync('userInfo')).id, // 评价用户id
			limit: 10,
			page: 1,
			dataList: [],
			config: [
				'待处理',
				'处理中',
				'派单中',
				'详情',
				'继续投诉',
				'已撤销',
				'已评价'
			],
			configStyle: [
				'yellow',
				'orange',
				'blue',
				'green',
				'red',
				'grey',
				'grey'
			],

		}
	},
	components: {
		nodata
	},
	onLoad() {
		this.getComplaintList()
	},
	methods: {
		goToComplain() {
			console.log('1');
			uni.navigateTo({
				url: '/pagesMy/complaintFeedback/complain'
			})
		},
		handleDetail(item) {
			console.log(item, 'item.....');
			uni.navigateTo({
				url: '/pagesMy/complaintFeedback/complainDetail?id=' + item.id
			})
		},
		lowerBottom() {
			console.log('jinlaile');
			if (this.page * this.pageSize >= this.total) return this.showMoreData = true
			this.page += 1
			this.getComplaintList()
		},
		getComplaintList() {
			this.$api.get('/api/complaint/page', {
				limit: this.limit,
				Page: this.page,
				complainantId: this.userId
			}).then(res => {
				console.log(res, 'res-------');
				if (res.data.code == 0) {
					this.totalPage = Math.ceil(res.data.data.total / this.limit)
					this.pageNo = res.data.data.pageNo
					this.pageSize = res.data.data.pageSize
					this.total = res.data.data.total
					if (this.page == 1) {
						this.dataList = res.data.data.list
					} else {
						this.dataList.push(...res.data.data.list)
					}
					if (this.dataList && this.dataList.length) {
						this.nodata = false
						this.showMoreData = true
					}
				} else {
					uni.showToast({
						icon: 'none',
						title: res.data.msg,
						success() {
							uni.navigateBack()
						}
					})
				}
			})
		},
		pj(item) {
			const obj = {
				guideId: item.id,
				orderCode: '',
				sourceType: 99
			}
			uni.navigateTo({
				url: '/pagesMy/appraise/appraise2?obj=' + JSON.stringify(obj) + '&item=' + JSON.stringify(item),
			});
		}
	}
}
</script>

<style lang="scss" scoped>
.pages {
	background: #fbfbfb;
	min-height: 90vh;
	font-size: 26rpx;
	position: relative;
	box-sizing: border-box;
	// padding-top: 130rpx;

	.content {
		padding: 20rpx;
		margin-bottom: 80rpx;
	}

	.bottom {
		position: fixed;
		bottom: 0;
		padding: 16rpx 0 30rpx;
		background: #fff;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;

		.btn {
			background: #007A69;
			color: white;
			text-align: center;
			height: 92rpx;
			line-height: 92rpx;
			align-self: center;
			border-radius: 46rpx;
			width: 702rpx;
			font-size: 32rpx;
			font-weight: bold;

		}
	}




	.title {
		color: #b5b5b5;
		margin-right: 30rpx;
		font-size: 28rpx;

	}

	.more_text {
		color: #AAAAAA;
		text-align: center;
		padding: 41rpx 0;
		font-size: 30rpx;
		margin-bottom: 105rpx;

	}

	.card {
		border-radius: 16rpx;
		background: #fff;
		padding: 37rpx 24rpx;
		position: relative;
		border-bottom: 1rpx solid #EFEFEF;

		.data {
			font-size: 30rpx;
		}

		.object {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.yellow {
				color: #FEB000
			}

			.red {
				color: #88919D
			}

			.green {
				color: #88919D;
			}

			.blue {
				color: #88919D;
			}

			.grey {
				color: #88919D;
			}

			.orange {
				color: #FF9100;
			}

			text {
				font-size: 30rpx;
			}
		}


		.detail {
			margin: 40rpx 0;

			text {
				font-size: 30rpx;
			}
		}

		.submitTime {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
		}

		.qpj {
			width: 148rpx;
			height: 64rpx;
			background: #007A69;
			border-radius: 32rpx;
			line-height: 64rpx;
			text-align: center;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #FFFFFF;
			position: absolute;
			right: 24rpx;
			bottom: 46rpx;
		}
	}
}
</style>